<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>用户名:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="userName" placeholder="用户名"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>用户密码:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="password" type="password" placeholder="用户密码"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>确认密码:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="newpassword" type="password" placeholder="用户密码确认"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>选择头像:</span>
        </div></el-col>
        <el-upload
            class="avatar-uploader"
            name="fileName"
            :action='uploadUrl'
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img style="width: 100px;height: 100px" v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-row>

      <el-button type="success" @click="login">注册</el-button>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "enter",
  data(){
    return {
      uploadUrl:"tm/tianmao/ImgPost",
      userName: '',
      password: '',
      newpassword: '',
      imageUrl:'',
      imgPath:'',
    }
  },
  methods: {
    login() {
      if (this.newpassword==this.password){
        let formData=new FormData()
        formData.append("userName",this.userName)
        formData.append("userPwd",this.password)
        formData.append("userImg",this.imgPath)
        this.axios.post("tm/tianmao/addUser",formData).then(
            r=>{
              if (r.data=='ok'){
                this.$router.push("/")
              }
            }
        )
      }else {
        alert("两次密码输入不一致")
      }
    },
    handleAvatarSuccess(res, file){
      if (res.info!='no'){
        this.imgPath=res.info;
        this.$message.success('文件上传成功')
      }else {
        this.$message.success('文件上传失败')
      }
      this.imageUrl=URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.labClass{
  margin-top: 10px;
}
.box-card{
  margin-top: 10%;
  margin-left: 30%;
  margin-right: 30%;
}
</style>